<template>
    <div class="user-box" v-bind:class="{isSmall: mode === 'small'}">
        <p v-if="mode === 'default'" id="user-name">{{ name }} <span id="first-word">{{ firstw }}</span></p>
        <span v-else-if="mode === 'small'" id="first-word-small">{{ firstw }}</span>
    </div>
</template>

<script>
    export default {
        name: 'userName',
        props: {
            name: {
                type: String,
                required: true
            },
            mode: {
                type: String,
                default: 'default'  //默认状态small
            }

        },
        data: function () {
            return {
                firstw: ''
            }
        },
        created: function () {
            this.firstw = this.splitWord(this.name)
        },
        methods: {
            splitWord: function (word) {
                var firstw = word.slice(0, 1);
                return firstw;
            }
        }
    }
</script>

<style scoped>
    #first-word,
    #first-word-small {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: rgb(103, 151, 242);
        border-radius: 50%;
        text-align: center;
        color: white;
    }

    #first-word-small {
        width: 16px;
        height: 16px;
    }

    #user-name {
        font-weight: bold;
        padding-left: 20px;
    }

    .user-box {
        height: 150rpx;
        border-bottom: 1px solid rgb(235, 235, 235);
    }

    .user-box.isSmall {
        border-bottom: none
    }
</style>